<template>
  <div class="app-main-container">
    <div class="app-main-title">{{ title }}</div>
    <div class="doumee-filter">
      <el-input v-model="filters.kh" placeholder="请输入实体卡号" clearable />
      <el-input v-model="filters.name" placeholder="请输入实体卡名称" clearable />
      <el-button v-preventReClick type="primary" @click="$message.info('权限不足')">查找</el-button>
      <el-button v-preventReClick @click="filters = {}">清空</el-button>
      <el-button v-preventReClick type="primary" @click="$message.info('权限不足')">新增</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column align="center" label="实体卡号" prop="code" min-width="200" />
      <el-table-column align="center" label="实体卡名称" prop="name" min-width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template></el-table-column>
      <el-table-column align="center" label="销售渠道" prop="xsqd" min-width="200" />
      <el-table-column align="center" label="首充最低金额" prop="je" min-width="150" />
      <el-table-column align="center" label="创建时间" prop="time" min-width="200" />
      <el-table-column align="center" label="备注" prop="bz" min-width="200" />
    </el-table>
    <div class="flex-cc doumee-pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        hide-on-single-page
        :current-page.sync="pagination.page"
        :total="totalCount"
        @current-change="getDevice"
      />
    </div>
  </div>
</template>

<script>
import { deviceList, deviceStatusChange } from '@/api'
import { parseTime } from '@/utils'
export default {
  data() {
    return {
      swiperOptions: {
        slidesPerView: 'auto',
        pagination: {
          el: '.swiper-pagination'
        }
      },
      dialogTableVisible: false,
      page: 1,
      totalCount: 10,
      list: [{
        code: '14155',
        name: '普通卡',
        xsqd: '商户PC端',
        je: '200',
        time: '2022-04-11 14:29:25',
        bz: '备注'
      }, {
        code: '141515',
        name: '普通卡',
        xsqd: '商户PC端',
        je: '200',
        time: '2022-04-11 12:21:25',
        bz: '备注'
      }, {
        code: '146624',
        name: '铜钻卡',
        xsqd: '商户PC端',
        je: '200',
        time: '2022-04-12 14:29:25',
        bz: '备注'
      }, {
        code: '25643644',
        name: '普通卡',
        xsqd: '商户微信端',
        je: '500',
        time: '2022-04-14 18:02:14',
        bz: '备注'
      }, {
        code: '1526373',
        name: '普通卡',
        xsqd: '商户PC端',
        je: '200',
        time: '2022-04-11 14:29:25',
        bz: '备注'
      }],
      listLoading: true,
      openStatus: [
        { value: '', label: '全部' },
        { value: '1', label: '正常使用' },
        { value: '0', label: '停用' }
      ],
      deviceStatus: [
        { value: '1', label: '启用' },
        { value: '0', label: '禁用' }
      ],
      areaList: [],
      filters: {
        checkedStatus: null
      },
      newDevice: {
        id: null,
        name: null,
        code: null,
        areaId: null,
        status: null
      },
      title: ''
    }
  },
  created() {
    this.listLoading = false
    this.title = this.$route.meta.title
  },
  methods: {
    toConfigUpdate(e, id, status) {
      deviceStatusChange({ param: { id, status }}, sessionStorage.getItem('venueId')).then(res => {
        console.log(res)
        this.getAreaList()
      }).catch(err => {
        console.log(err)
        this.getAreaList()
      })
    },
    getDevice() {
      deviceList({
        pagination: {
          firstQueryTime: parseTime(new Date()),
          page: this.page,
          rows: 10
        },
        param: {
          venueId: sessionStorage.getItem('venueId'),
          //  shopId
          status: this.filters.checkedStatus
        }
      }, sessionStorage.getItem('venueId')).then(res => {
        console.log('-----', res)
        if (res.errorCode === '000000') {
          // this.totalCount = res.totalCount
          const t = res.totalCount / 10
          const count = Number(t.toFixed(0)) + (t - t.toFixed(0) > 0 ? 1 : 0)
          this.totalCount = count * 10
          this.list = res.recordList
        }
      }).catch(err => {
        console.log('-----', err)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.footer-style {
  display: flex;
  justify-content: space-between;
  background-color: #f2f2f2;
  margin: -10px -20px -30px;
  height: 50px;
  .bottom-left {
    margin-left: 20px;
    height: 20px;
    margin-top: 15px;
    .sum-title-style {
      font-size: 15px;
      color: #222;
    }
    .sum-pay-value-style {
      font-size: 17px;
      font-weight: 500;
      color: #DD0707;
    }
    .dis-title-style {
      font-size: 14px;
      color: #222;
    }
    .discoun-style {
      font-size: 16px;
      color: #DD0707;
    }
  }
  .bottom-right {
    margin-right: 20px;
    margin-top: 10px;
    height: 30px;
    .pay-action-style {
      width: 100px;
      height: 30px;
      font-size: 15px;
      line-height: 1px;
      vertical-align: middle
    }
  }
}

</style>
